<template>
    <div>
      <el-table :size="elTableSize" :data="tableData" :stripe="false" :border="columObj.border" :show-header="true" :highlight-current-row="true" @selection-change="handleSelectionChange" v-loading="columObj.loading" :row-class-name="tableRowClassName" @row-click="rowClick" :header-cell-style="$headerCellStyleFun" :cell-style="$cellStyleFun">
        <!-- 选择框是否开启，selectable控制是否单行禁用 -->
        <el-table-column v-if="columObj.selection" fixed type="selection" :selectable="columObj.selectable" width="50" />
        <!-- 序号列是否开启 -->
        <el-table-column v-if="columObj.showIndex" fixed type="index" label="序号" width="54" class-name="order_column" />
        <!-- 普通列 -->
        <!-- <el-table-column v-for="(column,columIndex) in columObj.columnData" :key="columIndex" :prop="column.prop" :label="column.label" :fixed="column.fixed" :width="column.width?column.width:column.multiLine?'300px':''" :sortable="column.sortable" :index="columIndex" :render-header="$renderHeaderFun"> -->
        <el-table-column v-for="(column,columIndex) in columObj.columnData" :key="columIndex" :prop="column.prop" :label="column.label" :fixed="column.fixed" :width="column.width?column.width:column.multiLine?'300px':''" :sortable="column.sortable" :index="columIndex">
          <template slot="header" slot-scope="scope">
            <div class="table-head">{{ $rewriteHeader(scope) }}</div>
          </template>
          <template slot-scope="{row,$index}">
  
            <!-- 默认展示 -->
            <span v-if="column.text && column.editRow != $index">
              <el-tooltip v-if="column.multiLine" :content="row[column.prop]" placement="top">
                <p class="descStyle">{{row[column.prop]}}</p>
              </el-tooltip>
              <span v-else>{{row[column.prop]}}</span>
            </span>
  
            <!-- 自定义内容 -->
            <span v-if="column.ownDefined">{{column.ownDefinedReturn(row,$index)}}</span>
  
            <!-- tag -->
            <div v-if="column.isTag">
              <el-tag :size="elTableBtnSize" :type="column.getType(row,$index)">{{column.ownDefinedReturn(row,$index)}}</el-tag>
            </div>
  
            <!-- 状态对象展示 -->
            <span v-if="column.status && row[column.prop]">{{row[column.prop].msg}}</span>
  
            <!-- switch开关 -->
            <el-switch v-if="column.switch" v-model="row[column.prop]" :inactive-text="row[column.prop] ? column.openText:column.closeText" @change="switchChange(row,$index,column.prop)" />
  
            <!-- 图片展示 -->
            <el-popover trigger="hover" placement="top" popper-class="popper">
              <img v-if="column.image" :src=" row[column.prop]" />
              <el-image slot="reference" v-if="column.image" :src="row[column.prop]" />
            </el-popover>
  
            <!-- 图片数组 -->
            <el-popover v-if="column.imageArr" trigger="hover" placement="top" popper-class="popper">
              <img v-if="row[column.prop].length>0" :src="row[column.prop][0]" />
              <el-image slot="reference" v-if="row[column.prop].length >0" :src="row[column.prop][0]" :preview-src-list="row[column.prop]" />
            </el-popover>
  
            <!-- 可编辑input，仅在text默认展示类型才可编辑-->
            <el-input v-focus v-if="column.editRow == $index" v-model="row[column.prop]" @blur="editInputBlur(row,$index,column.prop,columIndex)" />
  
            <!-- 操作按钮 -->
            <div v-if="column.isOperation">
              <span v-for="(operations, index) in column.operation" :key="index">
                <!-- <Buttons :size="elTableBtnSize" :type="operations.type" @parentClick="operations.buttonClick(row,$index)">
                  <span slot="title">{{operations.label}}</span>
                </Buttons> -->
                <el-button v-if="operations.isShow(row,$index)" :size="elTableBtnSize" :type="operations.type" @click="operations.buttonClick(row,$index)" :icon="operations.icon">{{operations.label}}</el-button>
              </span>
            </div>
  
          </template>
        </el-table-column>
        <!-- 操作列 -->
        <!-- <el-table-column v-for="(column,columIndex) in columObj.OperationList" :key="'c'+columIndex" :prop="column.prop" :label="column.label" :width="actionColWidth" class-name="operate-button" fixed="right" :sortable="column.sortable" :index="columIndex"> -->
        <el-table-column v-for="(column,columIndex) in columObj.OperationList" :key="'c'+columIndex" :prop="column.prop" :label="column.label" :width="column.width" class-name="operate-button" fixed="right" :sortable="column.sortable" :index="columIndex">
          <template slot="header" slot-scope="{column}">
            <div class="table-head">{{ $rewriteOperateHeader(column) }}</div>
          </template>
          <template slot-scope="{row,$index}">
            <!-- 操作按钮 -->
            <span v-for="(operations, index) in column.operation" :key="index">
              <!-- <Buttons :size="elTableBtnSize" :type="operations.type" @parentClick="operations.buttonClick(row,$index)">
                  <span slot="title">{{operations.label}}</span>
                </Buttons> -->
              <el-button v-if="operations.isShow(row,$index)" :size="elTableBtnSize" :type="operations.type" @click="operations.buttonClick(row,$index)" :icon="operations.icon">{{operations.label}}</el-button>
            </span>
          </template>
        </el-table-column>
  
      </el-table>
      <!-- 分页 -->
      <!-- <div class="page_div" :style="{textAlign: pageObj.position || 'center'}">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :hide-on-single-page="false" :current-page="pageObj.pageData.page" :pager-count="7" :page-sizes="[10, 15, 20, 30,50]" :page-size="pageObj.pageData.size" background layout="total,sizes,prev, pager, next" :total="pageObj.total">
        </el-pagination>
      </div> -->
    </div>
  </template>
   
  <script>
  export default {
    name: "elTables",
    directives: {
      // 自定义指令,用于可编辑input自动获取焦点
      focus: {
        inserted: function (e) {
          e.querySelector('input').focus()
        }
      }
    },
    props: {
      tableData: {
        type: Array,
        required: true
      },
      columObj: {
        type: Object,
        required: true
      },
      //columObj.type(如果为""空，就不会加载多选框，或者index编号),lazy(是否支持懒加载)
      //columnData.columType(列类型,可选text(默认为普通文字模式),input(input可编辑框),switch(switch开关),image(图片),operation(操作按钮))
      //prop(参数),label(列名),width(宽度),align(对齐方式),sortable(是否支持排序)
      //如果为操作列,则需要填写需要的操作按钮,类型为Object。type(按钮样式,参考el—botton类型),label(按钮文字)icon(参考el-icon),color(字体颜色),buttonClick为点击后调用的方法名称
      // pageObj: {
      //   type: Object,
      //   required: true
      // }
    },
    data() {
      // let readUploadFileUrl = this.$store.state.user.readUploadFileUrl;
      return {
        selectVal: []
        // viewUrl: readUploadFileUrl,
      }
    },
    mounted() {
      this.$nextTick(() => {
        // this.getTableColumnWidth()
      })
    },
    methods: {
      // 复选框选中的数据
      handleSelectionChange(val) {
        this.selectVal = val
      },
      // switchChange调用
      switchChange(row, $index, prop) {
        this.$emit("switchChange", row, $index, prop);
      },
      // 帮助点击行，获取点击的下标
      tableRowClassName({
        row,
        rowIndex
      }) {
        row.rowIndex = rowIndex;
      },
      // 点击行
      rowClick(row, column, event) {
        this.$emit("rowClick", row, column, event);
      },
      // 可编辑input失去焦点
      editInputBlur(row, $index, prop, columIndex) {
        this.$emit('editInputBlur', row, $index, prop, columIndex);
      },
      // 条数变化
      handleSizeChange(e) {
        this.$emit('handleSizeChange', e);
      },
      // 页码变化
      handleCurrentChange(e) {
        this.$emit('handleCurrentChange', e);
      }
    },
    computed: {},
  }
  </script>
  
  <style lang="scss" scoped>
  .el-button {
    margin: 0 6px;
  }
  ::v-deep .el-input__inner {
    border: none;
  }
  ::v-deep .el-image__inner {
    height: 50px;
  }
  // switch左边文字颜色
  ::v-deep .el-switch__label--left {
    color: #606266;
  }
  img {
    height: 400px;
  }
  .page_div {
    padding: 15px 0;
  }
  </style>
  